為什麼需要 Snapshot testing？

假設我們有個檔案 super-heros.js ****export getFlyingSuperHeros ，找出有 'fly' 技能的 super hero：

super-heros.js

const superHeros = [
	{name: 'Dynaguy', powers: ['disintegration ray', 'fly']},
  {name: 'Apogee', powers: ['gravity control', 'fly']},
	{name: 'Frozone', powers: ['freeze water']},
]

function getFlyingSuperHeros(){
  return superHeros.filter(hero => {
    return hero.powers.includes('fly')
  }
}

export {getFlyingSuperHeros}

現在要測試 getFlyingSuperHeros ，在 __tests__/super-heros.js 我們通常會這樣做： console.log(flyingHeroes) 印出來看看， flyingHeros 印出來的結果就是我們預期的，然後把結果貼到 expect(flyingHeros).toEqual() 裡面。

tests/super-heros.js

import {getFlyingSuperHeros} from '../super-heros'

test('returns returns super heros that can fly', () => {
  const flyingHeros = getFlyingSuperHeros()
  console.log(flyingHeroes) // 印出來看看 flyingHeros 預期是什麼
  expect(flyingHeros).toEqual([
		// 把 console.log(flyingHeroes) 印出來的結果貼到這裡
  ])
})

這樣這個測試就大功告成了 ~

tests/super-heros.js

import {getFlyingSuperHeros} from '../super-heros'

test('returns returns super heros that can fly', () => {
  const flyingHeros = getFlyingSuperHeros([
  expect(flyingHeros).toEqual([
    {name: 'Dynaguy', powers: ['disintegration ray', 'fly']},
    {name: 'Apogee', powers: ['gravity control', 'fly']},
  ])
})

我們剛剛這樣寫 assertion 的過程，看起來似乎沒什麼問題，但如果你下次要新增一個也有 'fly' 技能的 super hero：

super-heros.js

const superHeros = [
	{name: 'Dynaguy', powers: ['disintegration ray', 'fly']},
  {name: 'Apogee', powers: ['gravity control', 'fly']},
	{name: 'Frozone', powers: ['freeze water']},
	{name: 'Jack-Jack', powers: ['shapeshift', 'fly']}, // 新增一個 super hero
]

同時也要到 __tests__/super-heros.js 更新 assertion，又要重複一次 console.log(flyingHeroes)，再一次把印出來的結果貼到 expect(flyingHeros).toEqual() 裡面：

import {getFlyingSuperHeros} from '../super-heros'

test('returns returns super heros that can fly', () => {
  const flyingHeros = getFlyingSuperHeros()
  console.log(flyingHeroes) // 再印一次
  expect(flyingHeros).toEqual([
    {name: 'Dynaguy', powers: ['disintegration ray', 'fly']},
    {name: 'Apogee', powers: ['gravity control', 'fly']},
    {name: 'Jack-Jack', powers: ['shapeshift', 'fly']},
  ]) // 再貼一次印出來的結果
})

假設我們之後新增 100 個 super heros，就要手動重複做這樣的事情 100 次，真是太不方便了，而且很難維護 test assertions。幸好，可以把這些事情交給 Jest Snapshots 來自動完成。

（待更新...）